<template>
    <div class="footerBtn">
        <el-button @click="dialogVisible = true" style="height:40px;">上传图片</el-button>
        <img :src="face" v-show="face" style="width:50px;height:50px;margin:10px;border-radius:5px" />
        <!-- 弹出层-裁剪 -->
        <el-dialog title="上传头像" :visible.sync="dialogVisible" :before-close="handleClose" :modal="false">
            <span>
                <el-row>
                    <el-col :span="12" style="width:100%;display:flex;flex-wrap:nowrap;justify-content: space-around;">
                        <!-- 裁剪 -->

                        <div class="file-upload-design" @click="dialog_show">
                            <div class="file-upload-design-icon" name="desgin"></div>
                            <div class="file-upload-design-txt">请上传头像，仅支持JPG、PNG格式</div>
                            <input type="file" name="fileToUpload" id="fileToUpload" style="display:none;"
                                @change="uploadImg($event, 1)">
                        </div>
                        <vueCropper style="width:70%;height:300px" ref="cropper" :img="attach.customaryUrl"
                            :autoCrop="options.autoCrop" :fixedBox="options.fixedBox" :canMoveBox="options.canMoveBox" 
                            :autoCropWidth="options.autoCropWidth" :autoCropHeight="options.autoCropHeight"
                            :fixNumber="options.fixNumber" :fixed="options.fixed" :outputType="options.outputType"
                            
                            :centerBox="options.centerBox" @realTime="realTime"></vueCropper>
                    </el-col>
                </el-row>
                <el-row class="footerBtn2" align="center">
                    <el-button type="primary " size="medium" @click="confirm('blob')">确认</el-button>
                    <el-button type="info" size="medium" @click="handleClose">取消</el-button>
                </el-row>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'upload',
    props: ['face'],
    data() {
        return {
            dialogVisible: false,
            options: {
                autoCrop: true, //默认生成截图框
                fixedBox: false, //固定截图框大小
                canMoveBox: true, //截图框不能拖动
                centerBox: true, //截图框被限制在图片里面
                autoCropWidth: 200,  //截图框宽度
                autoCropHeight: 200, //截图框高度    
                canScale: false,
                fixed: true, // 是否开启截图框宽高固定比例
                fixedNumber: [1, 1], // 截图框的宽高比例
                outputType: 'jpeg', // 裁剪生成图片的格式
            },
            previews: {}, //实时预览图数据
            attach: {
                //后端附件表
                id: "",
                userId: "",
                customaryUrl: "", //原图片路径
                laterUrl: "", //裁剪后图片路径  /static/logo.png
                attachType: "photo" //附件类型
            },
            photoType: '',
        };
    },
    methods: {
        dialog_show() {
            document.getElementById('fileToUpload').click()
        },
        //控制弹出层关闭
        handleClose() {
            this.dialogVisible = false;
        },
        //实时预览
        realTime(data) {
            this.previews = data;
        },
        //点击图片调取input
        clickUpload() {
            this.$refs.filElem.dispatchEvent(new MouseEvent('click'))
        },
        //选择本地图片
        uploadImg(e) {
            var file = e.target.files[0];
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB，请重新上传!');
            }
            if (!/\.(jpg|png|JPG|PNG)$/.test(e.target.value)) {
                this.$message.error("图片类型必须是jpg,png中的一种");
                return false;
            }
            var type = file.name.split('.')[file.name.split('.').length-1];//获取文件类型
            type = type.toLowerCase();//转换为小写
            this.photoType = type;
            //fileReader 接口，用于异步读取文件数据
            var reader = new FileReader();
            reader.readAsDataURL(file); //重要 以dataURL形式读取文件
            reader.onload = e => {
                // data = window.URL.createObjectURL(new Blob([e.target.result])) 转化为blob格式
                let data = e.target.result;
                this.attach.customaryUrl = data;
                // 转化为base64
                // reader.readAsDataURL(file)
                // 转化为blob
            };
        },
        //确认截图,上传
        confirm() {
            this.$refs.cropper.getCropData(res => {
                // console.log(res, 'res')//这里截图后的url 是base64格式 让后台转下就可以
                this.$emit('updateFace', res, this.photoType);
                this.dialogVisible = false

            });
        }
    }
};
</script>
<style>
/* 弹性布局 水平居中 */
.el-dialog {
    width: 700px !important;
    height: auto;
}

.show-preview {
    display: flex;
    justify-content: center;
}

.preview {
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #cccccc;
    background: #cccccc;
    width: 100px !important;
    height: 100px !important;
    margin: 20px;
}

.upload-img {
    width: 100px;
    height: 30px;
    border: 1px solid #f08512;
    margin-bottom: 5px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.footerBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.footerBtn2 {
    display: flex;
    justify-content: flex-end;
    margin: 15px 0;
}

.file-upload-design {
    width: 150px;
    height: 110px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 1px dashed rgba(55, 191, 237, 0.584);
    display: inline-block;
}

.file-upload-design-icon {
    width: 50px;
    height: 40px;
    background-image: url("https://img.zcool.cn/community/01a1995b349602a80121b994526ed0.png@1280w_1l_2o_100sh.png");
    background-size: 100% 100%;
    margin: 15px 50px 10px 50px;
}

.file-upload-design:hover {
    cursor: pointer;
}

.file-upload-design-txt {
    margin: 9px 5px;
    height: 12px;
    font-size: 10px;
    text-align: center;
    color: #AAAAAA;
}

.el-dialog__title {
    font-size: 15px !important;
    font-weight: 600;
}

.el-dialog__header {
    border-bottom: 1px solid rgb(230, 230, 230);
}
.el-form-item__label{
    text-align: left !important;
}
</style>

